<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script th:href="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
  <!-- table组件 -->
  <script th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js}"
    src="/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
  <script th:href="@{/js/bootstrap.min.js}" src="/js/bootstrap.min.js"></script>
  <script th:href="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
    src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <script th:href="@{/ajax/libs/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js}"
    src="/ajax/libs/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js"></script>
  <!-- <script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script> -->
  <!-- table样式 -->
  <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet" href="/ruoyi/css/ry-ui.css" />
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" href="/css/bootstrap.min.css" />
  <!-- 树组件 -->
  <!-- <link rel="stylesheet" href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css">
	<script src="/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script> -->
  <!-- 遮罩层 -->
  <script th:href="@{/ajax/libs/blockUI/jquery.blockUI.js}" src="/ajax/libs/blockUI/jquery.blockUI.js"></script>
  <script th:href="@{/ajax/libs/iCheck/icheck.min.js}" src="/ajax/libs/iCheck/icheck.min.js"></script>
  <script th:href="@{/ajax/libs/layer/layer.min.js}" src="/ajax/libs/layer/layer.min.js"></script>
  <script th:href="@{/ajax/libs/layui/layui.min.js}" src="/ajax/libs/layui/layui.min.js"></script>
  <script th:href="@{/ruoyi/js/ry-ui.js}" src="/ruoyi/js/ry-ui.js"></script>
  <!-- <script src="/ruoyi/js/common.js"></script> -->

  <!-- <link rel="stylesheet" href="/ajax/libs/jquery-layout/jquery.layout-latest.css">
	<script src="/ajax/libs/jquery-layout/jquery.layout-latest.js"></script> -->
  <!-- 表单验证插件 -->
  <script th:href="@{/ajax/libs/validate/jquery.validate.min.js}"
    src="/ajax/libs/validate/jquery.validate.min.js"></script>
  <script th:href="@{/ajax/libs/validate/jquery.validate.extend.js}"
    src="/ajax/libs/validate/jquery.validate.extend.js"></script>
  <script th:href="@{/ajax/libs/validate/messages_zh.js}" src="/ajax/libs/validate/messages_zh.js"></script>
  <link th:href="@{/ajax/libs/layui/css/modules/laydate/default/laydate.css}" rel="stylesheet"
    href="/ajax/libs/layui/css/modules/laydate/default/laydate.css" />
  <!-- 分页 -->
  <script th:href="@{/js/layui.js}" src="/js/layui.js"></script>
  <link th:href="@{/css/layui.css}" rel="stylesheet" href="/css/layui.css" />
  <script src="../../static/js/jquery.min.js"></script>
  <!-- 全局jq -->
  <script src="./jquery-3.6.1.js"></script>
  <script src="./layui-v2.7.6/layui/layui.js"></script>

  <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" />

  <style>
    /* .fixed-table-pagination{
			display: flex !important;
		}
		.float-right {
			display: block !important;
		}
		.layui-layer-btn{
			text-align: center !important;
		} */
    /* .layui-tree {
      max-height: 340px;
      margin-right: 18px;
      overflow: auto;
    } */

    .layui-tree-entry {
      height: 30px !important;
    }

    .tab {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 10px;
    }

    .ui-layout-west {
      width: 100%;
      height: 100%;
      display: flex;
      background: rgb(240, 240, 240);
      padding: 10px 0;
      ;
    }

    .box {
      margin-left: 10px;
      border-top: 0;
      width: 230px;
      height: 100%;
      background-color: #fff;
      font-size: 16px;
      min-height: calc(100vh - 66px);
      overflow: auto;
    }

    .ui-layout-content {
      width: 100%;
      /* height: 100%; */
    }

    .leftBtmbtn {
      padding: 30px;
    }

    .leftBtmbtn div {
      margin: 10px 0;
      color: #1c92ec;
    }

    .leftBtmbtn div p {
      cursor: pointer;
    }

    .layoutRightContent {
      width: calc(100% - 230px);
      height: 100%;
      margin: 0 10px;
    }

    .rightContentTop {
      width: 100%;
      height: 100%;
      /* display: flex; */
    }

    .rightContentTop .row {
      width: 100%;
      margin: 0;
    }

    .row .col-12 {
      padding: 0;
    }

    .newAddListItem {
      border-radius: 5px;
      width: 100%;
      height: 70px;
      background: #fff;
      line-height: 70px;
      position: relative;
    }

    .add {
      position: absolute;
      /* 定位改变位置 */
      top: 29px;
      left: 10px;
      bottom: 30px;
      width: 40px;
      height: 40px;
      /* 设置宽高 */
      margin: auto;
      line-height: 70px;
      background-color: rgb(28, 144, 231);
      border-radius: 20px;
      /* 设置边框圆角 */
    }

    .add::before {
      content: "";
      /* 设置一个虚拟的，不占空间的块 */
      position: absolute;
      left: 50%;
      top: 2px;
      /* 设置位置为box的竖线 */
      width: 2px;
      height: 45%;
      /* 设置宽高 */
      margin-left: -1px;
      margin-top: 8px;
      /* 调整位置 */
      background-color: white;
    }

    .add::after {
      content: "";
      /* 设置一个虚拟的，不占空间的块 */
      position: absolute;
      left: 0;
      top: 40%;
      /* 设置位置为box的横线 */
      width: 35%;
      height: 2px;
      /* 设置宽高 */
      margin-top: 2px;
      margin-left: 13px;
      /* 调整位置 */
      background-color: white;
    }

    .btn-group-sm {
      margin-left: 60px;
    }

    /* .addBtn {
      height: 50px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      background-color: #fff;
      color: rgb(28, 144, 231);
    } */

    .col-12 {
      width: 100%;
      height: 100%;
      padding: 0 15px;
    }

    .col-12 #table .detail {
      width: 0;
      border: none;
      border: #fff;
    }

    .preservation {
      width: 100%;
      height: 100px;
      text-align: center;
    }

    .preservation button {
      width: 100px;
      height: 40px;
      border: none;
      border-radius: 10px;
      color: #fff;
      background-color: rgb(28, 144, 231);
    }

    .addShebei {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      color: rgb(123, 123, 123);
      background: rgb(242, 242, 242);
    }

    .add_class {
      width: 100%;
      height: 100%;
      padding: 0 20px;
    }

    .all_add {
      width: 100%;
      display: flex;
    }

    .add_class .aa {
      width: 100px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      text-align: center;
      color: white;
      background-color: #1c92ec;
      margin: 40px auto;
    }

    .shebeiLeft {
      width: 100%;
      height: 100%;
    }

    .shebeiSearch {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .shebeiSearch input {
      border: 1px solid #f5f5f5;
      background-color: #f8f8f8;
      padding: 5px;
    }

    .tianjiaTree {
      width: 100%;
      height: 300px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    .shebeiRight {
      width: 100%;
      height: 100%;
      margin-left: 20px;
    }

    .chosenText {
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }

    .chosen {
      width: 100%;
      height: 300px;
      border: 1px solid #ccc;
    }

    /* 设置模态框样式 */
    #demo1 {
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .edit_class,
    .enter_class,
    .enterGroup_class {
      width: 100%;
      height: 100%;
    }

    .edit_title,
    .enter_title,
    .enterGroup_title {
      padding: 0 20px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: #f2f2f2;
      color: #a6a6a6;
    }

    .edit_iptbox,
    .enter_iptbox,
    .enterGroup_iptbox {
      padding: 0 20px;
      width: 100%;
      margin: 10px 0;
    }

    .reTitle {
      margin: 5px 0;
    }

    .edit_Istrue {
      display: flex;
      flex-wrap: wrap;
    }

    .oneIstrue {
      width: 80px;
      height: 30px;
      line-height: 30px;
      margin: 10px 18px;
      border-radius: 2px;
      text-align: center;
      font-size: 12px;
      background-color: #6dd9c3;
    }

    .btn_sure {
      width: 100px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      color: white;
      background-color: #1c92ec;
      margin: 40px auto;
    }

    .enterGroupBtn {
      border: 0px;
      margin-top: 150px;
    }

    /* 左侧作业区 */
    /* 左侧树改样式 */
    .layui-tree-iconClick .layui-icon {
      font-size: 12px;
      position: absolute;
      top: -1px;
      left: -1px;
    }

    .layui-tree-icon,
    .layui-tree-iconClick {
      position: relative;
      margin-right: 20px;
    }

    .layui-icon-subtraction:after {
      position: absolute;
      top: -1px;
      left: 15px;
      content: '';
      width: 14px;
      height: 13px;
      background-image: url('/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png');
      background-position: -151px -25px;
    }

    .layui-icon-addition:after {
      position: absolute;
      top: -1px;
      left: 15px;
      content: '';
      width: 14px;
      height: 13px;
      background-image: url('/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png');
      background-position: -151px -4px;
    }

    .layui-icon-file:before {
      content: '';
      position: absolute;
      top: 4px;
      left: 2px;
      content: '';
      width: 14px;
      height: 13px;
      background-image: url('/ajax/libs/jquery-ztree/3.5/css/metro/img/metro.png');
      background-position: -151px -47px;
    }

    .layui-tree-entry {
      height: 25px !important;
    }

    .layui-tree-txt {
      font-size: 13px;
    }

    /* 左侧树改样式 */

    .ui-layout-west .box-main {
      width: 230px;
      height: 100%;
    }

    #Tree1 {
      margin-top: 15px;
      margin-left: 15px;
      margin-bottom: 15px;
      max-height: 570px;
      overflow: auto;
    }

    /* 点击工作树高亮显示 */
    .clickColor {
      color: #1c92ec;
    }

    .gongzuoshu_setbtn {
      text-align: center;
      display: flex;
      padding: 0 30px;
    }

    #delAreaBtn {
      background-color: #f58c90;
    }

    /* 左侧作业区 */

    /* 工作区表格样式 */
    .layui-table td {
      font-size: 13px;
    }

    .layui-table tbody tr,
    .layui-table thead tr {
      height: 40px;
    }

    .layui-table thead tr {
      background-color: #ecf1f2;
    }

    .layui-table thead tr th {
      font-weight: 700 !important;
      font-size: 16px !important;
    }

    .layui-table-tips-c:before {
      position: relative;
      right: 1px;
      top: -2px;
    }

    .layui-table-body {
      font-size: 13px;
      height: 350px;
    }

    .operation .layui-btn-sm {
      height: 23px;
      line-height: 23px;
      padding: 0px 6px;
      font-size: 12px;
    }
    #newAreaShow {
      width: 100%;
      padding: 0 100px;
      box-sizing: border-box;
    }

    /* .addbtn {
      background-color: #72d7c0;
    }

    .setbtn {
      background-color: #85baee;
    }

    .delbtn {
      background-color: #f58c90;
    } */

    .shebeibianhao .layui-btn-xs {
      width: 96px;
      margin-top: 20px;
      margin-left: 25px;
    }

    .layui-table-page {
      text-align: center;
    }

    /* 工作区表格样式 */
    .layui-form-item {
      display: flex;
    }
    .labelDian {
      flex: 1;
    }
    .reTitless {
      margin-right: 5px;
      flex: 2;
    }
    .layui-form-label {
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="ui-layout-west">
    <!-- 左侧工作区列表 start -->
    <div class="box">
      <!-- 左侧工作区树形列表 -->
      <div class="ui-layout-content">
        <div id="Tree1"></div>
      </div>
      <!-- 左侧工作区树形列表 -->
    </div>
    <!------------------------- 录入区域弹出层 start -->
    <!-- <form action="" id="luruSelect">
      <div class="enterGroup_class" id="enterGroup_class" style="display: none">
        <div class="enterGroup_title">数据点信息</div>
        <div class="enterGroup_iptbox">
          <div class="reTitle">
            <img src="../../../static/images/required.png" alt="" />
            <span>区域组名称</span>
          </div>
          <div class="inp">
            <input type="text" class="form-control categoryName" placeholder="请输入名称" maxlength="30" />
          </div>
        </div>
        <div class="enterGroup_iptbox">
          <div>所属区域</div>
          <div class="inp">
            <div class="selectSpan form-control">请选择上级区域</div>
            <div id="selectData" style="display: none;"></div>
          </div>
        </div>
        <div id="enterGroup_sure" class="btn_sure enterGroupBtn" lay-submit lay-filter="formLuruSelect"><i class="fa fa-plus"></i>保存</div>
      </div>
    </form> -->
    <!------------------------- 录入区域弹出层 end -->

    <!------------------------- 设置区域弹出层 start -->
    <!-- <div class="enterGroup_class" id="setArea" style="display: none">
      <div class="enterGroup_title">设置区域组</div>
      <div class="enterGroup_iptbox">
        <div class="reTitle">
          <span>区域组名称</span>
        </div>
        <div class="inp">
          <input type="text" class="form-control setDataName" placeholder="请输入名称" maxlength="30" />
        </div>
      </div>
      <div class="enterGroup_iptbox">
        <div>所属区域</div>
        <div class="inp">
          <div class="setSpan form-control"></div>
        </div>
      </div>
      <div class="gongzuoshu_setbtn">
        <div id="setAreaBtn" class="btn_sure enterGroupBtn" lay-submit lay-filter="formLuruSelect"><i class="fa fa-plus"></i> 保存</div>
        <button id="delAreaBtn" class="btn_sure enterGroupBtn" lay-submit lay-filter="formLuruSelect"><i class="fa fa-remove"></i>删除</button>
      </div>
    </div> -->
    <!------------------------- 设置区域弹出层 end -->
    <!-- 左侧工作区列表 end -->

    <!-- 工作区域列表 start -->
    <div class="layoutRightContent">
      <div class="rightContentTop">
        <div class="newAddListItem">
          <div class="btn-group-sm" id="toolbar" role="group" >
            <button class="addBtn btn btn-success" style="background-color: #1c84c6;border-color:#1c84c6;"><i class="fa fa-plus" ></i>绑定点位</button>
          </div>
        </div>
        <!----------- 工作区表格录入区域弹窗 start -->
        <form action="" id="form-add">
          <div class="enterGroup_class" id="newAreaShow" style="display: none">
            <div class="enterGroup_title">区域信息</div>
            <div class="enterGroup_iptbox">
              <div class="inp" id="select_warp">
                <div>监测点名称</div>
              </div>
              <select name="pointId" lay-verify="" lay-search="" class="reTitle layui-form form-control selectClick" id="selset-form">
                <option value="" class="selectData">请选择</option>
              </select>
            </div>
            <div class="enterGroup_iptbox">
              <div class="inp" id="select_warp">
                <div>安装点位</div>
              </div>
              <div class="layui-form-item">
                <select
                  name="pointId"
                  lay-verify=""
                  class="reTitless layui-form form-control"
                  id="selset-formOne"
                >
                  <option value="" class="selectData">请选择</option>
                </select>
                <select
                  name="pointId"
                  lay-verify=""
                  class="reTitless layui-form form-control"
                  id="selset-formTwo"
                >
                  <option value="" class="selectData">请选择</option>
                </select>
                <select
                  name="pointId"
                  lay-verify=""
                  class="reTitless layui-form form-control"
                  id="selset-formThree"
                >
                  <option value="" class="selectData">请选择</option>
                </select>
                <select
                  name="pointId"
                  lay-verify=""
                  class="reTitless layui-form form-control"
                  id="selset-formFour"
                >
                  <option value="" class="selectData">请选择</option>
                </select>
                <select
                  name="pointId"
                  lay-verify=""
                  class="reTitless layui-form form-control"
                  id="selset-formFive"
                >
                  <option value="" class="selectData">请选择</option>
                </select>
              </div>
            </div>

            <div class="enterGroup_iptbox">
              <div>所属设备</div>
              <div class="inp">
                <input type="text" class="form-control workspace" placeholder="请输入名称" maxlength="30" value="" />
              </div>
            </div>
            <div class="enterGroup_iptbox">
              <div>上限值</div>
              <div class="inp">
                <input type="text" class="form-control" placeholder="请输入上限值" maxlength="30" name="upperLimit" />
              </div>
            </div>
            <div class="enterGroup_iptbox">
              <div>下限值</div>
              <div class="inp">
                <input type="text" class="form-control" placeholder="请输入下限值" maxlength="30" name="lowerLimit" />
              </div>
            </div>
            
            <div style="text-align: center">
              <button id="enterGroup" class="btn_sure enterGroupBtn" lay-submit lay-filter="formDemo"><i class="fa fa-plus"></i>保存</button>
            </div>
          </div>
        </form>
        <!-- --------- 录入区域弹窗 end -->

        <!-- 点击表格编辑弹出层 -->
        <form action="" id="form-set">
          <div class="enterGroup_class" id="setAreaShow" style="display: none">
            <div class="enterGroup_title">区域信息</div>
            <div class="enterGroup_iptbox">
              <div>监测点名称</div>
              <div class="inp" id="select_warp">
                <input type="text" class="form-control" onfocus="this.blur()" maxlength="30" value="" name="pointId" />
              </div>
            </div>
            <div class="enterGroup_iptbox">
              <div>所属区域组</div>
              <div class="inp">
                <input type="text" class="form-control setQuyu" onfocus="this.blur()" maxlength="30" value="" />
              </div>
            </div>
            <div class="enterGroup_iptbox">
              <div>上限值</div>
              <div class="inp">
                <input type="text" class="form-control setUpper" placeholder="请输入上限值" maxlength="30"
                  name="upperLimit" />
              </div>
            </div>
            <div class="enterGroup_iptbox">
              <div>下限值</div>
              <div class="inp">
                <input type="text" class="form-control setLower" placeholder="请输入下限值" maxlength="30"
                  name="lowerLimit" />
              </div>
            </div>
            <div class="enter_title">
              绑定设备
            </div>
            <div class="enter_iptbox">
              <div class="edit_Istrue" id="setEdit_Istrue">
              </div>
            </div>
            <div style="text-align: center"><button class="btn_sure enterGroupBtn" lay-submit
                lay-filter="formDemo"><i class="fa fa-plus"></i>保存</button></div>
          </div>
        </form>
        <!--  -->
        <div class="row">
          <div class="tab">
            <table id="demo" lay-filter="test"></table>
            <div id="pages" style="margin-left: 30%;"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 工作区域列表 end -->
  </div>




  <script type="text/html" id="toolEventDemo">
      <div class="operation">
        <button type="button" class="layui-btn setbtn layui-btn-sm" lay-event="setbtn" >
          <i class="fa fa-gear"></i>编辑
        </button>
        <button type="button" class="layui-btn delbtn layui-btn-sm" lay-event="delbtn">
          <i class="fa fa-remove"></i>解绑
        </button>
      </div>
    </script>
  </script>
  <!-- 
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" /> -->
  <script th:inline="javascript">

    $(function () {
      var treeData = {}
      var page = { pageSize: 10, pageNum: 1 };
      var  treeDataEjdwId = null;
      var  treeDataDw_3_id = null;
      var  treeDataDw_4_id = null;
      var  treeDataDw_5_id = null;

      function paramTrans(Id){
        console.log("选中treeData=============", treeData);
        if(Id != null){
            treeDataEjdwId = null;
            treeDataDw_3_id = null;
            treeDataDw_4_id = null;
            treeDataDw_5_id = null;
        }else {

          treeDataEjdwId = treeData.ejdwId;
          treeDataDw_3_id = treeData.dw_3_id;
          treeDataDw_4_id = treeData.dw_4_id;
          treeDataDw_5_id = treeData.dw_5_id;
        }
      }
      // 页面初始化加载表格
      function tabellistData(Id, pageNum, pageSize) {

        let data = { 
            ejdwId: treeDataEjdwId,
            dw_3_id: treeDataDw_3_id,
            dw_4_id: treeDataDw_4_id,
            dw_5_id: treeDataDw_5_id,
            equipmentId: Id,
            pageSize: page.pageSize,
            pageNum: page.pageNum 
          }
          console.log(data, 'data');
        $.ajax({
          method: 'POST',
          url: '/youtian/workspace-category/getDevicePointList',
          data: JSON.stringify(data),
          dataType: "json",
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
          success: function (res) {
            console.log(res);
            console.log('tabel', res.rows);
            tableList(res)
          }
        })
      }
      tabellistData(0)
      // -----------------------左侧工作区 start ------------------ 
      // 左侧工作区菜单
      
      function CategoryTree() {
        layui.use(["tree"], function () {
          var treeCkData = { id: 0 };
          var tree = layui.tree;
          $.ajax({
            method: "post",
            url: "/gzmx_scdw/gzmx_scdw/basicTree",
            success: function (res) {
              console.log("左侧工作区数据=============", res.data);
              if (res.code == 0) {
                var inst1 = tree.render({
                  elem: '#Tree1', //绑定元素
                  data: res.data,
                  id: 'leftTree',
                  click: function (obj) {
                    // $.ajax({
                    //   method: 'post',
                    //   url: '/gzmx_scdw/gzmx_scdw/tree',
                    //   data: {
                    //     workspaceCategoryId: obj.data.id,
                    //     pageSize: 300000
                    //   },
                    //   success: function (res) {
                    //     tableList(res)
                    //     console.log(res, 'res');
                    //   }
                    // })
                    console.log(obj, 'trrobj');
                    
                    if (obj.data.id !== treeCkData.id) {
                      // 点击左侧工作树高亮显示
                      $('div[data-id="' + obj.data.id + '"] span').eq(1).last().addClass("clickColor");
                      $('div[data-id="' + treeCkData.id + '"] span').eq(1).last().removeClass('clickColor');
                      treeCkData = obj.data;
                    }
                    $('.setDataName').val(obj.data.title)
                    treeData = obj.data
                    if (obj.data.label != "scdw") {
                      tabellistData(treeData.id)
                    }else {
                      tabellistData('')
                    }
                  },
                });
              } else {
                layer.msg('数据请求失败，请稍后重试');
              }
            },
          });
          //渲染
        });
      }
      // 发起ajax请求获取工作区列表
      CategoryTree();
      // ----------------点击设置区域组 start
      var setDataIndex = ''
      var setSpan = $('.setSpan').html('您未选择上级区域')
      $(".setArea").click(function () {
        layui.use('tree', function () {
          var tree = layui.tree
          setDataIndex = layer.open({
            type: 1,
            title: ["设置区域组", "font-size:18px;"],
            area: ['400px', '100%'],
            offset: 'rt',
            content: $("#setArea"),
            move: false,
          });
          if (!treeData) {
            return $('.setSpan').html('您未选择上级区域')
          } else {
            $('.setSpan').html(treeData.title)
          }
        })
      });
      // 点击设置提交保存
      $('#setAreaBtn').on('click', function () {
        let categoryName = $('.setDataName').val()
        let workspaceCategoryId = treeData.id
        let data = JSON.stringify({ categoryName, workspaceCategoryId })
        console.log(data, '设置区域组data');
        if (categoryName == '') {
          layui.layer.msg('区域组名称不能为空', { icon: 5 })
        } else if (setSpan == '您未选择上级区域') {
          layui.layer.msg('您未选择上级区域', { icon: 5 })
        } else {
          $.ajax({
            method: 'put',
            url: '/youtian/workspace-category',
            data: JSON.stringify({ categoryName, workspaceCategoryId }),
            dataType: "json",
            headers: {
              'Content-Type': 'application/json;charset=utf-8'
            },
            success: function (res) {
              console.log('设置区域组', res);
              if (res.code == '0') {
                layui.layer.msg(res.msg, { icon: 6 })
              } else {
                layui.layer.msg(res.msg, { icon: 5 })
              }
              CategoryTree()
              layer.close(setDataIndex)
              $('.setDataName').val('')
            }
          })
        }
      })
      // 设置区域删除工作区 start
      $('#delAreaBtn').on('click', function () {
        var categoryId = treeData.id
        console.log(treeData.id, 'treeData.id--------');
        if (!categoryId) {
          layui.layer.msg('请选择所属区域')
        } else {
          layui.layer.confirm('确定删除当前工作区吗？', function (index) {
            console.log(categoryId, 'workspaceCategoryId------');
            $.ajax({
              method: 'DELETE',
              url: `/youtian/workspace-category/${categoryId}`,
              success: function (res) {
                console.log('删除按钮', res);
                if (res.code == '0') {
                  layui.layer.msg(res.msg, { icon: 6 })
                } else {
                  layui.layer.msg(res.msg, { icon: 5 })
                }
                CategoryTree()
                $('.setDataName').val('')
                layui.layer.close(setDataIndex)
              }
            })
          })
        }
      })
      // 设置区域删除工作区 end
      // ----------------点击设置区域组 end

      // ----------------点击录入区域组 start
      /***
       * 
       * 
       * 点击录入 →弹窗
       * 
       * 
       * **/
      let onparentId = ''
      var enterGroupindex = ''
      $("#enterGroupItem").click(function () {
        enterGroupindex = layer.open({
          type: 1,
          title: ["录入区域组", "font-size:18px;"],
          area: ['400px', '100%'],
          offset: 'rt',
          content: $("#enterGroup_class"),
          move: false,
          cancel: function (index, layero) {
            $('.categoryName').val('')
            $('.selectSpan').html('请选择上级区域')
            onparentId = 0
            console.log(onparentId, 'onparentId3');
          }
        });

      });
      /**
       * 
       * 请选择上级区域
       * 
       * **/

      layui.use('tree', function () {
        var tree = layui.tree
        $('.selectSpan').on('click', function () {
          $('#selectData').fadeIn()
          $.ajax({
            method: "get",
            url: "/youtian/workspace-category/workspaceCategoryTree",
            success: function (res) {
              var tree = layui.tree;
              var inst1 = tree.render({
                elem: '#selectData',
                data: res.data,
                click: function (obj) {
                  $('#selectData').fadeOut()
                  $('.selectSpan').html(obj.data.title)
                  console.log('obj.data.title=======', obj.data.title)
                  onparentId = obj.data.id
                }
              })
            }
          })
        })
        /**
       * 
       * 保存提交录入信息
       * 
       * @parms 区域组名称  必填  
       * @parms 上级区域    选填
       * 
       * */

        // $('#enterGroup_sure').on('click', function (e) {
        //   console.log('enterGroupindex', enterGroupindex);
        //   var categoryName = $('.categoryName').val()
        //   console.log(onparentId, categoryName, '=====录入data数据');
        //   console.log(onparentId, 'onparentId');
        //   let json = {
        //     categoryName: categoryName,
        //     parentId: onparentId || 0,
        //     type: parseInt(treeData.level) + 1
        //   }
        //   if (json.categoryName) {
        //     $.ajax({
        //       method: "post",
        //       url: "/youtian/workspace-category",
        //       data: JSON.stringify(json),
        //       dataType: "json",
        //       headers: {
        //         'Content-Type': 'application/json;charset=utf-8'
        //       },
        //       success: function (res) {
        //         console.log(res);
        //         if (res.code === 0) {
        //           layui.layer.msg(res.msg, { icon: 6 })
        //         } else if (res.code === 500) {
        //           return layui.layer.msg('录入工作区失败,工作区已存在', { icon: 5 })
        //         } else {
        //           return layui.layer.msg('录入失败', { icon: 5 })
        //         }
        //         CategoryTree()
        //         layer.close(enterGroupindex, function () {
        //           onparentId = 0
        //           console.log(onparentId, 'onparentId2');
        //         });
        //         $('.categoryName').val('')
        //         $('.selectSpan').html('请选择上级区域')
        //       }
        //     })
        //   } else {
        //     layui.layer.msg('区域组名称不能为空')
        //   }

        // })
      })


      // ----------------点击录入区域组 end
      // -----------------------左侧工作区 end ------------------ 


      //-------------- 工作区域列表 start
      // ----工作区域录入

      // 工作区绑定点位下拉框
      var selectClickVal;
      function selectClick() {
        $(".selectClick").children().remove();
        $(".selectClick").append($("<option/>").text("请选择").attr("value", ""));
        let data = {
          deptId: null,
          ejdw_id: $("#selset-formTwo").val(),
          dw_3_id: $("#selset-formThree").val(),
          dw_4_id: $("#selset-formFour").val(),
          dw_5_id: $("#selset-formFive").val(),
        };
        console.log(data, "data");
        $.ajax({
          method: "POST",
          url: "/gzmx_tag/gzmx_tag/unboundDeviceTaglist",
          data: data,
          success: function (res) {
            console.log(res, "datares");
            selectClickVal = res.data;
            for (let i = 0; i < res.data.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $(".selectClick").append(
                $("<option/>")
                  .text(res.data[i].description)
                  .attr("value", res.data[i].sourceTag)
              );
            }
            layui.form.render()
          },
        });
      }
      $(".selectClick").change(function () {
        let val = $(".selectClick").val();
        console.log(val, "val");
        let selectClickdata = selectClickVal.filter((item) => {
          return item.sourceTag == val;
        });
        console.log(selectClickdata);
        $("#upperLimit").val(selectClickdata[0].max_value);
        $("#lowerLimit").val(selectClickdata[0].min_value);
      });

      /**
       * 接口为3.4.1
       */
      function scdwList() {
        $.ajax({
          method: "post",
          url: "/gzmx_scdw/gzmx_scdw/list",
          data: { jb: 1 },
          success: function (res) {
            console.log("绑定点位下拉框", res);
            for (let i = 0; i < res.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $("#selset-formOne").append(
                $("<option/>").text(res[i].dwmc).attr("value", res[i].id)
              );
            }
          },
        });
      }
      $("#selset-formOne").change(function () {
        console.log(111);
        $("#selset-formTwo").children().remove();
        $("#selset-formTwo").append(
          $("<option/>").text("请选择").attr("value", "")
        );
        console.log(111);
        let ejdwId = $("#selset-formOne").val();
        $.ajax({
          method: "post",
          url: "/gzmx_scdw/gzmx_scdw/list",
          data: { fdwdm: ejdwId },
          success: function (res) {
            console.log("绑定点位", res);
            for (let i = 0; i < res.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $("#selset-formTwo").append(
                $("<option/>").text(res[i].dwmc).attr("value", res[i].id)
              );
            }
            layui.form.render()
          },
        });
        selectClick();
      });
      $("#selset-formTwo").change(function () {
        console.log(111);
        $("#selset-formThree").children().remove();
        $("#selset-formThree").append(
          $("<option/>").text("请选择").attr("value", "")
        );
        let dw_3_id = $("#selset-formTwo").val();
        $.ajax({
          method: "post",
          url: "/gzmx_scdw/gzmx_scdw/list",
          data: { fdwdm: dw_3_id },
          success: function (res) {
            console.log("绑定点位", res);
            for (let i = 0; i < res.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $("#selset-formThree").append(
                $("<option/>").text(res[i].dwmc).attr("value", res[i].id)
              );
            }
            layui.form.render()
          },
        });
        selectClick();
      });
      $("#selset-formThree").change(function () {
        console.log(111);
        let dw_4_id = $("#selset-formThree").val();
        $("#selset-formFour").children().remove();
        $("#selset-formFour").append(
          $("<option/>").text("请选择").attr("value", "")
        );
        // console.log($('#selset-formFour').children());
        $.ajax({
          method: "post",
          url: "/gzmx_scdw/gzmx_scdw/list",
          data: { fdwdm: dw_4_id },
          success: function (res) {
            console.log("绑定点位", res);
            for (let i = 0; i < res.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $("#selset-formFour").append(
                $("<option/>").text(res[i].dwmc).attr("value", res[i].id)
              );
            }
            layui.form.render()
          },
        });
        selectClick();
      });
      $("#selset-formFour").change(function () {
        $("#selset-formFive").children().remove();
        $("#selset-formFive").append(
          $("<option/>").text("请选择").attr("value", "")
        );
        console.log(111);
        let dw_5_id = $("#selset-formFour").val();
        $.ajax({
          method: "post",
          url: "/gzmx_scdw/gzmx_scdw/list",
          data: { fdwdm: dw_5_id },
          success: function (res) {
            console.log("绑定点位", res);
            for (let i = 0; i < res.length; i++) {
              // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
              $("#selset-formFive").append(
                $("<option/>").text(res[i].dwmc).attr("value", res[i].id)
              );
            }
            layui.form.render()
          },
        });
        selectClick();
      });

      // function scdwList() {
      //   layui.use('form', function() {
      //     var form = layui.form
      //     $.ajax({
      //     method: 'get',
      //     url: '/gzmx_tag/gzmx_tag/workspace-pointlist',
      //     success: function (res) {
      //       console.log('绑定点位下拉框', res.data);
      //       for (let i = 0; i < res.data.length; i++) {
      //         // text+=`<option value=${tabelDatas[i].pointId}>${tableDatas[i].pointName}</option>`
      //         $('#selset-form').append($('<option/>').text(res.data[i].description).attr("value", res.data[i].sourceTag))
      //       }
      //       form.render()
      //     }
      //   })
      //   })
      // }


      // 点击出现录入框弹窗
      var luruindex = ''
      $(".addBtn").click(function () {
        luruindex = layer.open({
          type: 1,
          title: ["录入区域", "font-size:18px;"],
          area: ['70%', '70%'],
          content: $("#newAreaShow"),
          cancel:function(index, layero){ 
            console.log(index, layero, 'layero');
            layui.layer.close(luruindex)
            $('[name=upperLimit]').val('')
            $('[name=lowerLimit]').val('')
            $('.selectClick').val('')
            $('#selset-formOne').val('')
            $('#selset-formTwo').val('')
            $('#selset-formThree').val('')
            $('#selset-formFour').val('')
            $('#selset-formFive').val('')
          }
        });
        scdwList()
        $('.workspace').val(treeData.title)
      });

      // 工作区绑定点位按钮保存
      $("#enterGroup").on("click", function (e) {
        console.log(treeData, 'treedata');
        console.log($('#selset-form').val());
        e.preventDefault()
        //  var workspaceCategoryId =  $('.setDataName').val(treeData.id)
        let data = {
          equipmentId: treeData.id,
          pointId: $('[name=pointId]').val(),
          maximum: $('[name=upperLimit]').val(),
          minimum: $('[name="lowerLimit"]').val()
        }
        console.log(data, 'data');
        if (treeData.label != 'device') {
          return layui.layer.msg('请在设备下绑定点位', { icon: 5 });
        }
        if (data.equipmentId && data.pointId && data.maximum && data.minimum) {
          if (parseInt(data.maximum) > data.minimum) {
            $.ajax({
              method: 'post',
              url: '/youtian/point-equipment',
              data: JSON.stringify(data),
              dataType: "json",
              contentType: 'application/json',
              success: function (res) {
                console.log('新增工作点数据', res);
                if (res.code !== 0)
                  return layui.layer.msg(res.msg, { icon: 5 });
                layui.layer.msg(res.msg, { icon: 6 });
                // tabellistData()
                layui.table.reload('#demo', tabellistData(treeData.id))
                layui.layer.close(luruindex);
                $('[name=upperLimit]').val('')
                $('[name=lowerLimit]').val('')
                $('.selectClick').val('')
                $('#selset-formOne').val('')
                $('#selset-formTwo').val('')
                $('#selset-formThree').val('')
                $('#selset-formFour').val('')
                $('#selset-formFive').val('')
              }
            })
          } else {
            layui.layer.msg('下限值不能大于上限值')
          }
        } else {
          layui.layer.msg('必填项不能为空')
        }
      })



      // ------------------------工作区表格

      function tableList(res) {
        console.log(res, 'taobelso');
        layui.use(["table", 'layer', 'laypage'], function () {
          var tableData = res.rows
          console.log('tableData===', tableData)
          var layer = layui.layer;
          //第一个实例
          var table = layui.table;
          // 工作区表格显示区域
          table.render({
            elem: "#demo",
            height: 430,
            count: res.total,
            data: tableData,
            cols: [
              [
                //表头
                {
                  field: 'pointId',
                  title: "点位ID",
                  width: "20%",
                  align: "center",
                },
                {
                  field: "pointName",
                  title: "检测点名称",
                  width: "20%",
                  align: "center",
                },
                {
                  field: "upperLimit",
                  title: "上限值",
                  width: "15%",
                  align: "center",
                },
                {
                  field: "lowerLimit",
                  title: "下限值",
                  width: "15%",
                  align: "center",
                },
                {
                  field: "operation",
                  title: "操作",
                  width: '30%',
                  align: "center",
                  templet: $('#toolEventDemo'),
                },
              ],
            ],
          });
          // 分页功能
          var laypage = layui.laypage;
          laypage.render({
            elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
            count: res.total, //数据总数，从服务端得到
            curr: page.pageNum,
            layout: ["prev", "page", "next", "skip"],
            limit: page.pageSize,
            jump: function (obj, first) {
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
              page.pageSize = obj.limit;
              page.pageNum = obj.curr;
              //首次不执行
              if (!first) {
                // $.ajax({
                //   method: 'get',
                //   url: '/youtian/workspace-category/getPointList',
                //   data: {
                //     workspaceCategoryId: treeData.id,
                //     //  pageNum: pageNum,
                //     pageSize: page.pageSize,
                //     pageNum: page.pageNum
                //   },
                //   success: function (res) {
                //     console.log(res);
                //     console.log('tabel', res.rows);
                //     tableList(res)
                //   }
                // })
                tabellistData(treeData.id)
              }
            },
          });
          // 发起请求查询某监测点下已绑定的设备
          function equipment(data) {
            $.ajax({
              method: 'get',
              url: '/youtian/equipment/point-equipment-list',
              data: { pointId: data },
              success: function (res) {
                console.log(res, '查询某监测点下已绑定的设备');
                for (let i = 0; i < res.data.length; i++) {
                  $('#setEdit_Istrue').append($('<div class="oneIstrue"/>').html(res.data[i].equipmentName))
                }
              }
            })
          }
          // 点击表格设置弹出层 
          table.on('tool(test)', function (obj) {
            console.log(obj, 'obj');
            $('[name=pointId]').val(obj.data.pointId)
            $('.setQuyu').val(obj.data.workspaceCategoryId)
            console.log(obj.data.pointId, 'obj.data.pointId');
            // 监测点下已绑定的设备的方法
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
              case 'setbtn':
                equipment(obj.data.pointId)
                var index = layer.open({
                  type: 1,
                  title: ["设置区域", "font-size:18px;"],
                  area: ['70%', '70%'],
                  content: $("#setAreaShow"),
                  cancel: function () {
                    $('#setEdit_Istrue').empty();
                  }
                });

                function formToJson(data) {
                  data = data.replace(/&/g, "\",\"");
                  data = data.replace(/=/g, "\":\"");
                  data = "{\"" + data + "\"}";
                  return data;
                }
                layui.use('table', function () {
                  $("#form-set").on("submit", function (e) {
                    e.preventDefault()
                    //  var workspaceCategoryId =  $('.setDataName').val(treeData.id)
                    var data = $(this).serialize()
                    console.log('提交数据========', data);
                    // 将form.serialize() 转json
                    var demo1 = formToJson(data)
                    let upperLimit = $('.setUpper').val()
                    let lowerLimit = $('.setLower').val()
                    console.log(lowerLimit, upperLimit, '-------------');
                    if (lowerLimit && upperLimit) {
                      if (parseInt(lowerLimit) < parseInt(upperLimit)) {
                        console.log(lowerLimit, upperLimit, '&&');
                        $.ajax({
                          method: 'put',
                          url: '/youtian/pointAttribute/edit',
                          data: demo1,
                          dataType: "json",
                          headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                          },
                          success: function (res) {
                            console.log('设置工作点数据', res);
                            if (res.code !== 0)
                              return layui.layer.msg(res.msg, { icon: 5 });
                            layui.layer.msg(res.msg, { icon: 6 });
                            tabellistData(treeData.id)
                            layui.layer.close(index);
                          }
                        })
                      } else {
                        layui.layer.msg('下限值不能大于上限值')
                      }
                    } else {
                      console.log(lowerLimit, upperLimit, '&----&');
                      layui.layer.msg('必填项不能为空')
                    }
                  })
                })

                break;
              // 点击表格删除数据
              case 'delbtn':
                layer.confirm('确定删除吗？', function (index) {
                  console.log(obj, 'JSON.stringify');
                  $.ajax({
                    method: 'delete',
                    url: `/youtian/point-equipment/${obj.data.pointEquipmentId}`,
                    dataType: "json",
                    headers: {
                      'Content-Type': 'application/json;charset=utf-8'
                    },
                    success: function (res) {
                      console.log(res);
                      if (res.code == 0) {
                        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                        layer.close(index);
                        layer.alert('删除成功', { icon: 1 });
                      } else {
                        layer.alert(res.msg, { icon: 2 });
                      }
                      tabellistData(treeData.id)
                    }
                  })


                  // 向服务端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
                  /*
                  table.reloadData(id, {
                    scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                  });
                  */
                });
                console.log('obj.event====', obj.event);
                console.log('obj.event=====', obj);
                break;
            };
          });
        });
      }

      // -------------------------工作区表格
      //-------------- 工作区域列表 end
    });
  </script>
</body>

</html>